<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的基本使用</title>
    <!-- 引入 vue.js -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- div id 为 app 挂载点 -->
    <div id="app">
        <h2>组件A：向总线bus 上报事件</h2>
        <my-component-a ></my-component-a>
        <h2>组件B：接收总线bus 上报事件</h2>
        <my-component-b ></my-component-b>

        <template>
            <div>

            </div>
        </template>
    </div>

    <!-- 使用 javascript 脚本 -->
    <script type="text/javascript">
        var bus = new Vue();
        Vue.component('my-component-a', {
            template: '<div><p> 组件A</p><hr><button @click="doClick">{{ conter }}</button></div > ',
            data() {
                return {
                    conter: 0,
                }
            },
            methods: {
                doClick() {
                    this.conter++;
                    // 向总线bus 上报事件(事件名称，事件参数)
                    bus.$emit('btn-click', this.conter);
                }
            },
        });
        Vue.component('my-component-b',{
            template: '<div><p>组件B</p><hr><p>计数器:{{ counter }}</p></div>',
            data(){
                return{
                    counter:0,
                }
            },
            created() {
                bus.$on('btn-click',(counter) => {
                    this.counter = counter;
                })
            },
            methods: {

            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                total: 0,
            },
            methods: {
                doChildclick: function () {
                    this.total += 1;
                }
            }
        });
    </script>
</body>

</html>